<!DOCTYPE html>
<html lang="zh">
  {% extends "base.html" %}
  <head>
    <meta charset="UTF-8" />
    <meta
      name="description"
      content="这个是单词的目录界面，展示了所有的单词，以及基本几个属性；
      "
    />
        {% block title %}

    <title>单词目录</title>    {% endblock %}

  </head>

  <body style="height:2000px;">
    {% block body %}
<div id="container" style="background-color= ; ">
    <h1>Here is the Index of ALL WORDS：</h1>
    <hr />
    <table>
      <!--列颜色-->
      <colgroup>
        <col />
        <col style="background-color: #e0ffff" />
      </colgroup>

      {%for word in word_list%}
      <tr>
        <td>{{word.word_id}}</td>
        <td>{{word.word_value}}</td>

        <!--todo:为wordbook插入链接-->

        <!--注意这个写法，是如何写锚点的-->
        <td><a href="{{word.word_id}}">MORE </a></td>

        {%endfor%}
      </tr>
    </table>

<!-- 尝试增加 go_to_top 按钮-->

 <div id="target" style="height=10px;width=10px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script>
test.onclick = function(){
target.scrollIntoView();
}
</script>
</div>
</div>

{% endblock %}
  </body>
</html>
